.scroller {
  height: 200px;
  max-width: 380px;
  border: 1px solid;
  overflow: auto;
  scroll-timeline: --indicator;
  ins {
    display: block;
    border-top: solid green;
    animation-name: widthExpand;
    animation-duration: 1ms;
    animation-timeline: --indicator;
    position: sticky;
    top: 0;
    z-index: 9999;
  }
  img {
    max-width: 100%;
    animation: scaleUp 1ms both, fadeIn 1ms both;
    animation-timeline: --scaleFade;
    view-timeline: --scaleFade;
  }
}
.container {
  // width: 299px;
  overflow: hidden;
  width: min(360px, 100%);
  resize: horizontal;

  section {
    margin-block: 1em;
    padding-inline: 1em;
    border: 1px solid #ccc;
    max-height: 120px;
    overflow: hidden;
    position: relative;
    label {
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      height: 2em;
      --start-color: #0000;
      --end-color: #0002;
      background: url(../assets/svgs/arrow.svg) 50% 100% / 1.5rem 1.5rem
          no-repeat,
        linear-gradient(var(--start-color), var(--end-color));
      visibility: hidden;
    }
  }
}
label:has(:checked) {
  rotate: 180deg;
  --start-color: #0002;
  --end-color: #0000;
}
section {
  --flag: false;
  animation: setFlag 1ms;
  scroll-timeline: --detectScroll;
  animation-timeline: --detectScroll;
  &:has(:checked) {
    max-height: none;
  }
}
section:has(:checked) label {
  visibility: visible;
}
@keyframes scaleUp {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes widthExpand {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
@keyframes setFlag {
  from,
  to {
    --flag: true;
  }
}

@container style(--flag: true) {
  label {
    visibility: visible;
  }
}
.btn {
  font-size: 14px;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 5px 20px;
  height: 40px;
  background-color: #2a80eb;
  position: relative;
  cursor: pointer;
  // filter: sepia(100%);
  &.loading {
    &::first-line {
      color: transparent;
    }
    &::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      inset: 0;
      box-sizing: border-box;
      border: 2px solid;
      border-top-color: transparent;
      margin: auto;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(transparent 10%, #2a80eb 11%, white);
  margin: 20px auto;
  mask: radial-gradient(closest-side, transparent 75%, black 76%);
  animation: spin 2s linear infinite reverse;
}
